
<template>
  <div>
        <Card>
            <Form :model="formItem" :label-width="70">
                <Row :gutter="10" type="flex"  align="middle"  >
                    <Col span="8">
                        <FormItem label="用户">
                            <Input v-model="formItem.name" placeholder="姓名/手机号" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="用户类型">
                            <Select v-model="formItem.userType" >
                                <Option  v-for="item in userTypeList" :value="item.state" :key="item.state">{{ item.desc }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="反馈类型">
                            <Select v-model="formItem.feedbackType" >
                                <Option  v-for="item in feadbackTypeList" :value="item.state" :key="item.state">{{ item.desc }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                <!-- </Row>
                <Row :gutter="10" type="flex" justify="space-between" align="middle"  > -->
                    <Col span="8">
                        <FormItem label="处理状态">
                            <Select v-model="formItem.state" >
                                <Option  v-for="item in dealTypeList" :value="item.state" :key="item.state">{{ item.desc }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="发起时间">
                            <DatePicker v-model="timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择反馈时间范围"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                
                <Row :gutter="10" >
                <Col span="8" offset="16"  style="text-align:right;">
                    <Button @click="searchgetTable" class="zh-hollow" type="primary" icon="ios-search-strong">搜索</Button>
                </Col>
                
                </Row>
            </Form>
        </Card>
        <Card style="margin-top:10px;" :padding="0">
            <Table :loading="loading" border :columns="columns" :data="data"></Table>
            <Page :current.sync="pageNumber" :total="total" show-total show-sizer  @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </Card>
        <Modal :title="modal_feedback_title"  v-model="modal_feedback"  :mask-closable="false" :class="state==='待处理'?'':'no_footer_modal'">
            <div style="padding:15px 30px;">
                <template v-if="modal_type==='complex'">
                    <Form :label-width="60">
                        <FormItem label="客户">
                            <p>{{fbkCon.customer}}</p>
                        </FormItem>
                        <FormItem label="机构名称">
                            <p>{{fbkCon.mechanism}}</p>
                        </FormItem>
                        <FormItem label="所在地">
                            <p>{{fbkCon.location}}</p>
                        </FormItem>
                        <FormItem label="详细地址">
                            <p>{{fbkCon.address}}</p>
                        </FormItem>
                        <FormItem label="经纬度">
                            <p>{{fbkCon.lon}}，{{fbkCon.lat}}</p>
                        </FormItem>
                        <FormItem>
                            <div id="zhMap" style="height:200px;"></div>
                        </FormItem>
                    </Form>
                </template>
                <template v-if="modal_type==='simple'">
                    <p>{{fbkCon.content}}</p>
                    <div v-if="!!fbkCon.image" class="zh-flex zh-flex-5 zh-flex-wrap">
                        <img @click="viewPic(fbkCon.image)" :src="fbkCon.image" style="width:30%;cursor:pointer;" alt="">
                    </div>
                </template>
            </div>
            <div slot="footer">
                <div class="zh-flex zh-flex-5" >
                    <Button @click="cancelErr" type="ghost">忽略</Button>
                    <Button @click="comfirm" class="zh-hollow" type="primary" >确认</Button>
                </div>
            </div>
        </Modal>  
        <Modal title="查看图片" v-model="visible" class="no_footer_modal">
            <img :src="viewImg" v-if="visible" style="width: 100%">
        </Modal>  
    </div>
</template>

<script>
import util from '@/libs/util.js'
import {getFeedbackCondition,viewPosition,viewOpinion} from '@/libs/get.js';
import {getFeedbackTable,confirmPositionErr,cancelPositionErr,confirmOpinion} from '@/libs/post.js'
export default {
    name:'',
    data () {
        return {
            btnp:{},
            btn:{
                yhfkui_ck:false
            },
            state:'',
            clickConfirm:true,
            clickCancle:true,
            visible:false,
            viewImg:'',
            copy_fbkCon:{},
            fbkCon:{
                uuid:'',
                customer:'',
                mechanism:'',
                location:'',
                address:'',
                lat:'',//维度
                lon:'',//经度
                content:'',
                image:''
            },
            modal_type:'',
            modal_feedback:false,
            modal_feedback_title:'',
            loading:true,
            total:0,
            timeRange:[],
            pageNumber:1,
            pageSize:10,
            formItem:{
                name:'',
                feedbackType:'',
                state:'',
                userType:''
            },
            userTypeList:[],
            feadbackTypeList:[],
            dealTypeList:[],
            columns:[
                {
                    key:'name',
                    title:'姓名',
                    minWidth:120
                },
                {
                    key:'mobile',
                    title:'手机号',
                    align:'center',
                    minWidth:120
                },
                {
                    key:'userType',
                    title:'用户类型',
                    align:'center',
                    minWidth:120
                },
              
                {
                    key:'feedbackType',
                    title:'反馈类型',
                    align:'center',
                    minWidth:120
                },

                {
                    key:'created',
                    title:'反馈时间',
                    align:'center',
                    minWidth:150
                },
                {
                    key:'state',
                    align:'center',
                    title:'处理状态',
                    minWidth:100
                },
                {
                    key:'action',
                    title:'反馈内容',
                    align:'center',
                    minWidth:100,
                    fixed:'right',
                    render:(h,params)=>{
                        let uuid=params.row.uuid;
                        return h('Button',{
                            props:{
                            type:'text',
                            size:'small'
                            },
                            style:{
                            color:'#2D8CF0',
                            display:this.btnp.yhfkui_ck?'inline-block':'none'
                            },
                            on:{
                                click:()=>{
                                    this.fbkCon.uuid=uuid;
                                    this.state=params.row.state;
                                    this.modal_feedback_title=params.row.feedbackType;
                                    if(params.row.feedbackType==='机构位置错误'){
                                        this.modal_type='complex';
                                        this.getPositionInfo(uuid);   
                                    }else{
                                        this.modal_type='simple';
                                        this.getOpinionInfo(uuid);
                                    }
                                    this.modal_feedback=true;
                                }
                            }
                        },'查看')
                    }
                }
                
            ],
            data:[]
        };
    },
    methods:{
        async comfirm(){
            if(this.clickConfirm){
                this.clickConfirm=false;
                if(this.modal_feedback_title==='机构位置错误'){
                    await this.comfirmErr()
                }else{
                    await this.comfirmSug()
                }
                this.clickConfirm=true;
            }
            
        },
        async comfirmSug(){
            let uuid=this.fbkCon.uuid;
            let res=await confirmOpinion({uuid});
            let response=res.data;
            if(response.code===200){
                this.$Notice.success({
                desc:'确认成功'
                });
                this.modal_feedback=false;
                this.getTable();
            }else{
                this.$Notice.error({
                    desc:response.msg
                });
               
            }
        },
        async comfirmErr(){
            let inst={
                uuid:this.fbkCon.uuid,
                name:this.fbkCon.mechanism,
                longitude:this.fbkCon.lon,
                latitude:this.fbkCon.lat,
                addr:this.fbkCon.location
            }
            let res=await confirmPositionErr({inst:JSON.stringify(inst)});
            let response=res.data;
            if(response.code===200){
                  this.$Notice.success({
                desc:'确认成功'
                });
                this.modal_feedback=false;
                this.getTable();
            }else{
                this.$Notice.error({
                desc:response.msg
                });
               
            }
        },
        async cancelErr(){
            if(this.clickCancle){
                this.clickCancle=false;
                let uuid=this.fbkCon.uuid;
                let res=await cancelPositionErr({uuid});
                let response=res.data;
                if(response.code===200){
                    this.$Notice.success({
                    desc:'已忽略'
                    });
                    this.modal_feedback=false;
                    this.getTable();
                }else{
                    this.$Notice.error({
                    desc:response.msg
                    });  
                }
                this.clickCancle=true;
            }
            
        },
        async getOpinionInfo(uuid){
            let res=await viewOpinion(uuid);
            let response=res.data;
            if(response.code===200){
                this.modal_feedback=true;
                this.fbkCon.image=response.data.data.image
                this.fbkCon.content=response.data.data.opinion;       
            }else{
                this.$Notice.error({
                desc:response.msg
                });
                return false
            }
        },
        async getPositionInfo(uuid) {
            let res=await viewPosition(uuid);
            let response=res.data;
            if(response.code===200){
                this.modal_feedback=true;
                this.fbkCon.customer=response.data.customer;
                this.fbkCon.mechanism=response.data.positionerror.inst_name;
                this.fbkCon.location=`${response.data.state.province} ${response.data.state.city} ${response.data.state.district}`;
                this.fbkCon.address=response.data.positionerror.addr;
                this.fbkCon.lat=response.data.positionerror.latitude;
                this.fbkCon.lon=response.data.positionerror.longitude;
                this.initMap(this.fbkCon.lon,this.fbkCon.lat);  
                
            }else{
                this.$Notice.error({
                desc:response.msg
                });
                return false
            }
        },  
        async getConditionList(){
            let res=await getFeedbackCondition();
            let response=res.data;
            if(response.code===200){
                this.userTypeList=[{state:'全部',desc:'全部'},...response.data.customer_type];
                this.feadbackTypeList=[{state:'全部',desc:'全部'},...response.data.feedbackType];
                this.dealTypeList=[{state:'全部',desc:'全部'},...response.data.state];
            }else{
                this.$Notice.error({
                desc:response.msg
                });
            }
        },
        searchgetTable(){
            this.pageNumber=1;
            this.getTable();
        },
        async getTable(){
            this.loading=true;
            let form=JSON.parse(JSON.stringify(this.formItem));
            for(let key in form){
                if(form[key]==='全部'){
                form[key]='';
                }
            }
            if(!!this.timeRange[0]&&this.timeRange.length>0){
                form.startTime=util.time1(this.timeRange[0]);
                form.endTime=util.time1(this.timeRange[1]);
            }else{
                form.startTime='';
                form.endTime='';
            }
            form.pageSize=this.pageSize;
            form.pageNumber=this.pageNumber;
            let res=await getFeedbackTable(form);
            let response=res.data;
            if(response.code===200){
                this.total=response.data.total;
                this.data=response.data.rows;
                this.loading=false;
            }else{
                this.$Notice.error({
                title: '失败',
                desc:response.msg
                });
                return false
            }
        },
        pageSizeChange(size){
        //回到第一页
            this.pageNumber=1;
            this.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.pageNumber=number;
            this.getTable();
        },
        viewPic(src){
            this.visible=true;
            this.viewImg=src;
        },
        initMap(lon,lat){
            let map = new BMap.Map("zhMap");
            let point=new BMap.Point(lon, lat);
            map.centerAndZoom(point,15);
            let marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);               // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            let label = new BMap.Label(`${lon}，${lat}`,{offset:new BMap.Size(20,-10)});
	        marker.setLabel(label);
        }
    },
    watch:{
        modal_feedback:function(){
            if(!this.modal_feedback){
                 this.fbkCon=JSON.parse(JSON.stringify(this.copy_fbkCon));
            }
        }
    },
    created(){
        this.copy_fbkCon=JSON.parse(JSON.stringify(this.fbkCon));
        this.getConditionList();
        this.getTable();
        this.btnp=util.bpower(this,this.btn);
    }
}

</script>
<style lang='scss' >
</style>